Amazon Cognito ユーザープール入門してみた

こんにちは！コンサルティング部のくろすけです！
しばらくAPI関連の記事をメインに書いていこうかと思っております。
最終的に「僕の考えた最強のLambdaAPI」的にまとめられるといいなと思っております。
初回は、APIの認証・認可関連でCognitoユーザープールに入門してみました！

Amazon Cognito について

ウェブアプリとモバイルアプリ用のアイデンティティプラットフォームです。これは、OAuth 2.0 アクセストークンと AWS 認証情報のための、ユーザーディレクトリであり、認証サーバーであり、認可サービスです。Amazon Cognito を使用すると、組み込みのユーザーディレクトリ、エンタープライズディレクトリ、Google や Facebook などのコンシューマー ID プロバイダーからユーザーを認証および認可できます。

上記の通り、いわずもがなCognitoは認証・認可のサービスですね。
APIの認証に使用したいので、今回のケースではユーザープールの使用が適切かと思います。
アイデンティティプールもいつか記事にしたいですが、今回はユーザープールにフォーカスします。

ユーザープールについて

詳細な説明はこちらにあります。

概要

セルフサービスと管理者主導の両方によるユーザー作成、管理、認証を行うユーザーディレクトリ

主なユースケース

• アプリのユーザー認証および認可
• APIのユーザー認証および認可
• SAML 2.0およびOIDCを使用したSSOの提供
• ユーザーデータの管理
• etc...

機能

機能	説明
OIDC IdP	ユーザーを認証するためのIDトークンを発行する
認可サーバー	APIへのユーザーアクセスを認可するためのアクセストークンを発行する
SAML 2.0 SP	SAMLアサーションをIDトークンおよびアクセストークンに変換する
OIDC SP	OIDCトークンをIDトークンおよびアクセストークンに変換する
OAuth 2.0 SP	Apple、Facebook、Amazon、またはGoogleからのIDトークンを独自のIDトークンおよびアクセストークンに変換する
認証フロントエンドサービス	ホストされたUIでユーザーのサインアップ、管理、および認証を行う
独自のUIのためのAPIサポート	サポートされているAWS SDKを使用して、APIリクエストを通じてユーザーを作成、管理、および認証する¹
MFA	SMSメッセージ、TOTP、またはユーザーのデバイスを追加の認証要素として使用する¹
セキュリティ監視と対応	悪意のある活動や安全でないパスワードに対して保護する¹
カスタム認証フロー	独自の認証メカニズムを構築するか、既存のフローにカスタムステップを追加する¹
グループ	ユーザーの論理グループを作成し、トークンをアイデンティティプールに渡す際にIAMロールの階層を作成する
カスタムIDトークン	新しい、変更された、または抑制されたクレームでIDトークンをカスタマイズする
カスタムユーザー属性	ユーザー属性に値を割り当て、独自のカスタム属性を追加する

¹: サポートされているAWS SDK、追加の認証要素、およびセキュリティ機能は、特定の実装および構成に基づいて異なる場合があります。

やってみた

こちらをベースにアプリケーションでサインアップ〜サインインできるまでをやってみます。

Cognitoユーザープールの準備

1. Congitoコンソールから[ユーザープールを作成]を選択
   

2. 下記画像のように設定し、[作成]を選択

   • [従来のウェブアプリケーション]だとクライアントシークレットが生成され、リクエスト中にクライアントシークレットを含む必要があるようなので、今回は[シングルページアプリケーション]を選択
   • [リターンURL]は、ログイン後に遷移したいページのURLを設定

   

3. [アプリケーションクライアント]において、[編集]を選択
   

4. [ユーザー名とパスワード（ALLOW_USER_PASSWORD_AUTH）を使用してサインインします]を選択
   

5. 【任意：簡易確認】[ログインページを表示]を選択

   • 手順3~6で簡易的に挙動を確認します。必要ない方は飛ばしていただければと思います。

   

6. 【任意：簡易確認】[Create an account]を選択
   

7. 【任意：簡易確認】必要事項を記入して、[Sign Up]を選択

   • パスワードポリシーに引っかかる場合は、メッセージに従ってパスワードを変更する

   

8. 【任意：簡易確認】手順5で記入したEメールに届いたコードを入力し、[Confirm account]を選択

   • 手順2の[リターンURL]で設定した画面に遷移できたらOKです。
   • ここまででCognitoの認証機能の大枠は確認できたのかなと思います。

   

アプリケーションの準備

1. 【任意】nodeインストール

   • 自分はnodeおよびnpmが未インストールでしたので、インストールしました。

   brew install nodejs
   

2. exampleコードの取得

   1. リポジトリをクローンしてくるディレクトリに移動

      cd <任意のディレクトリパス>
      

   2. リポジトリをクローン

      git clone https://github.com/awsdocs/aws-doc-sdk-examples.git
      

   3. アプリケーションディレクトリまで移動

      cd ./aws-doc-sdk-examples/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example/frontend-client/src
      

3. config.jsonを編集
   

   • YOUR_AWS_REGION：AWSリージョン
   • YOUR_COGNITO_USER_POOL_ID：ユーザープールID
     
   • YOUR_COGNITO_APP_CLIENT_ID：クライアントID
     

4. npmインストール

   npm install
   

アプリケーション起動〜動作確認

1. アプリケーション起動

   npm run dev
   

2. ブラウザでhttp://localhost:5173/loginにアクセス

3. [Need an account? Sign Up]を選択
   

4. 必要事項を記入して、[Sign Up]を選択

   • パスワードポリシーに引っかかる場合は、メッセージに従ってパスワードを変更する

   

5. 手順8で記入したEメールに届いたコードを入力し、[Confirm account]を選択
   

6. [Email]と[Password]を入力し、[Sign In]を選択
   

7. サインインできました！
   

あとがき

Cognitoのユーザープールに入門してみました。
Cognitoのより全体的なところについては、こちらのBlackBeltがかなり参考になりました。

今回はアプリケーションの認証機能としてCognitoを試してみました。
が、現状の自分のゴールは「僕の考えた最強のLambdaAPI」なのでそれに向けて各要素の記事を逐次書ければと思っております。